<template>
  <div class="task-list-container">
    <CPageTable @register="registerPage" v-model:search-form="searchForm">
      <template #headerRightButton>
        <el-button type="primary" @click="handleAddSupplier" v-btnPermission="'SUPPLIER_ADD'">
          <CIcon class="g-mr4" type="c-xian-xinjian"></CIcon>
          新增
        </el-button>
      </template>
      <template #supplierSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.supplierName"
          :sub-text="scope.row.supplierCode"
        ></CTableColumn>
      </template>
      <template #creatorSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.creator"
          :sub-text="scope.row.createTime"
        ></CTableColumn>
      </template>
      <template #supplierType="{ scope }">
        {{ SupplierTypeMap[scope.row.supplierType] }}
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :showMoreNum="3" :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <AddOrEditSupplierDialog
      v-model:visible="addOrEditSupplierVisible"
      :supplierNo="addOrEditSupplierTaskNo"
      :type="addOrEditSupplierType"
      @refresh="refresh"
    ></AddOrEditSupplierDialog>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Supplier'
};
</script>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import AddOrEditSupplierDialog from './components/AddOrEditSupplierDialog/index.vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { useSupplierList } from './useSupplierList';
import { useRouter } from 'vue-router';
import { useKeepAliveRefresh } from '@/hooks/useKeepAliveRefresh';
import { useMessage } from '@/hooks/useMessage';
import { SupplierTypeMap } from '@/constants/enum';
import type { ISupplierResult } from '@/apis/system/config/model/supplierModel';
import { delSupplier } from '@/apis/system/config/supplier';

const { createMessage, createConfirm } = useMessage();
const { searchForm, searchOptions, tableOptions, tableFieldsSetting } = useSupplierList();
const options = reactive<CPageTableProps>({
  title: '供应商列表',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const router = useRouter();
const [registerPage, { refresh }] = useCPageTable(options);
useKeepAliveRefresh(refresh);

const addOrEditSupplierTaskNo = ref('');
const addOrEditSupplierType = ref<'ADD' | 'EDIT'>('ADD');
const addOrEditSupplierVisible = ref(false);

// 新建任务
function handleAddSupplier() {
  addOrEditSupplierTaskNo.value = '';
  addOrEditSupplierType.value = 'ADD';
  addOrEditSupplierVisible.value = true;
}

// 编辑任务
function handleEditSupplier(row: ISupplierResult) {
  addOrEditSupplierTaskNo.value = row.supplierNo;
  addOrEditSupplierType.value = 'EDIT';
  addOrEditSupplierVisible.value = true;
}
const handleManageUser = (row: ISupplierResult) => {
  router.push(
    `/system/organizationUser/supplier/userList?supplierNo=${row.supplierNo}&supplierName=${row.supplierName}`
  );
};
/**
 * 删除供应商
 */

const handleDel = (row: ISupplierResult) => {
  createConfirm('提示', '确认删除该供应商？', {
    iconType: 'warning',
    confirmButtonText: '删除'
  }).then(() => {
    delSupplier(row.supplierNo).then(() => {
      createMessage.success('删除成功！');
      refresh();
    });
  });
};
/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: ISupplierResult): TableButtonItem[] {
  return [
    {
      text: `管理用户(${row.userNum})`,
      btnPermission: 'SUPPLIER_USER_QUERY',
      onClick: () => handleManageUser(row)
    },
    {
      text: '编辑',
      btnPermission: 'SUPPLIER_EDIT',
      onClick: () => handleEditSupplier(row)
    },
    {
      text: '删除',
      btnPermission: 'SUPPLIER_DELETE',
      onClick: () => handleDel(row)
    }
  ];
}
</script>
